import React, { FC, useEffect, useState } from "react";
import { Typography } from "antd";
import { useRequest } from "ahooks";
import { getComponentStatService } from "../../../../service/stat";
import { useParams } from "react-router-dom";
import { getComponentConfByType } from "../../../../components/QuestionComponents";

const { Title } = Typography;

type PropsType = {
  selectedComponentId: string;
  selectComponentType: string;
};
const ChartStat: FC<PropsType> = (props: PropsType) => {
  const { selectedComponentId, selectComponentType } = props;
  const [stat, setStat] = useState();
  const { id = "" } = useParams();
  const { run } = useRequest(
    async (questionId, componentId) =>
      await getComponentStatService(questionId, componentId),
    {
      manual: true,
      onSuccess(res) {
        setStat(res.stat);
      },
    }
  );
  useEffect(() => {
    if (selectedComponentId) run(id, selectedComponentId);
  }, [id, selectedComponentId]);
  //生成统计图表
  function getStatElem() {
    if (!selectedComponentId) return <div>未选择组件</div>;
    const { StatComponent } = getComponentConfByType(selectComponentType) || {};
    if (StatComponent == null) return <div>该组件没有统计图表</div>;
    return <StatComponent stat={stat!} />;
  }
  return (
    <>
      <Title level={3}>图表统计</Title>
      <div>{getStatElem()}</div>
    </>
  );
};

export default ChartStat;
